import React , { Component } from 'react';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';

import {connect} from 'react-redux';

import {AddTodo,RemoveTodo} from './redux/Action.js';

import LiItem from './item.jsx';
/*
src
views
    action 文件夹

        redux
            Action.js
            ActionTypes.js
            Reducer.js
        _index.js 统一对外输出
        index.jsx view 页面
    action2
        index.jsx view 页面
        redux
            Action.js
            ActionTypes.js

Store.js
**/
class View extends Component {
    constructor(props){
        super(props);
        this.state = {
            name:'1'
        }
    }
    render(){
        const {onAddFn,isList,onRemoveFn} = this.props;
        const list = isList.map((val,key)=>{
            return(
                <LiItem
						id={val.id}
						key={val.id}
						text={val.text}
					/>
            )
        })
        const cfg = {
            cls:'web1940',
            content:'redux and mobx'
        }
        const cfg2 = {
            study:'前端开发工程师',
            content:'redux and mobx'
        }
        return (
            <div>
                <NavLink to="/">这是首页</NavLink><br/>
                <NavLink to="/filter">filter</NavLink><br/>
                <NavLink to="/add">add</NavLink><br/>
                <NavLink to="/newaction">newaction</NavLink><br/>
                <NavLink to="/action">action</NavLink><br/>
                <NavLink to="/action2">action2</NavLink><br/>
                这是一个action 学习的课程内容
                <input onClick={()=>onAddFn('参数回传',cfg)} type="button" value="参数回传"/>
                <input onClick={()=>onAddFn('再次被调取',cfg2)} type="button" value="再次被调取"/>
                <ul>{list}</ul>
            </div>
        )
    }
}
function mapStateToProps(state) {
  return {
      isList:state.add
  }
}
//是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。
const mapDispatchToProps = (dispatch, ownProps) => {
	// const {id} = ownProps;
    console.log(ownProps)
	return {
		onAddFn: (text,viewDate) => dispatch(AddTodo(text,viewDate))
	}
};

export default connect(mapStateToProps,mapDispatchToProps)(View);
